<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">















		<link rel="stylesheet" type="text/css" href="mastering_fabridge.cfm_files/tabview.css">
		<link rel="stylesheet" type="text/css" href="mastering_fabridge.cfm_files/border_tabs.css">
		<link rel="stylesheet" type="text/css" href="mastering_fabridge.cfm_files/syntaxHighlighter.css">
		<script language="javascript" type="text/javascript" src="mastering_fabridge.cfm_files/yahoo.js"></script>
		<script language="javascript" type="text/javascript" src="mastering_fabridge.cfm_files/event.js"></script>
		<script language="javascript" type="text/javascript" src="mastering_fabridge.cfm_files/dom.js"></script>
		<script language="javascript" type="text/javascript" src="mastering_fabridge.cfm_files/element-beta.js"></script>
		<script language="javascript" type="text/javascript" src="mastering_fabridge.cfm_files/tabview.js"></script>
		<script language="javascript" type="text/javascript" src="mastering_fabridge.cfm_files/shCore.js"></script>
		<script language="javascript" type="text/javascript" src="mastering_fabridge.cfm_files/shBrushJScript.js"></script>
		<script language="javascript" type="text/javascript" src="mastering_fabridge.cfm_files/shBrushXml.js"></script>
	<link rel="stylesheet" type="text/css" href="mastering_fabridge.cfm_files/main.css">
	<script language="javascript" type="text/javascript" src="mastering_fabridge.cfm_files/main.js"></script>
<title>skipslate - 10 Steps to Mastering the Adobe Flex-Ajax Bridge (FABridge)</title></head><body onload="init_app();">

	<div id="ctnr_outer">
		<div id="ctnr_header">
			<div id="ctnr_logo">
				<div id="img_logo">
					<img src="mastering_fabridge.cfm_files/skipslate.gif">
				</div>
			</div>

			<div id="ctnr_navigation">
				<div class="ui_blue"></div>
				<p class="navigation_text">
					<a href="http://www.skipslate.com/index.cfm">Home</a>
					<a href="http://www.skipslate.com/archives.cfm">Archives</a>
					
                                        <a href="http://www.skipslate.com/downloads.cfm">Downloads</a>
					<a href="http://www.skipslate.com/publications.cfm">Publications</a>
					<a href="http://www.skipslate.com/blog/">Blog</a>
					<a href="http://www.skipslate.com/about.cfm">About</a>
					
					<a href="http://www.skipslate.com/credits.cfm">Credits</a>
				</p>
				
				<div class="ui_brown"></div>
			</div>
		</div>

		<div id="ctnr_main">








	
	
	
			    <div id="ui_article" class="yui-navset yui-navset-left">

					<!-- begin tabs -->
			        <ul class="yui-nav">
			            
			            
			            
						
						
						
			        <li title="active" class="selected"><a href="#gist"><em>The Gist</em></a></li><li><a href="#article"><em>Article</em></a></li><li><a href="#code"><em>Code</em></a></li><li><a href="#download"><em>Downloads</em></a></li><li><a href="#link"><em>Links</em></a></li></ul>
					<!-- end tabs -->
					<!-- begin tab content -->
					
			        <div class="yui-content">
			            <div style="display: block;" id="gist" class="ui_tab_content">
							<h3>10 Steps to Mastering the Adobe Flex-Ajax Bridge (FABridge)</h3>

							<h4>The Gist</h4>
                            
                            <p>
Although currently in beta state, the Adobe Flex-Ajax Bridge (FABridge)
has proven to be a simple, easy to use library which exposes Flex
applications to traditional DHTML applications. However, current
documentation, code samples, and general misinformation are preventing
the exercising of this important technology. This article will present
10 simple steps to becoming a master of the FABridge. </p>      
							
							<p>Just want to dig in? Check out these downloads.
							</p><ul>
								<li><a target="_blank" href="http://www.skipslate.com/assets/download/4/fabridge_cheatsheets.pdf">FABridge Cheatsheets</a></li>
								<li><a href="http://www.skipslate.com/assets/download/4/fabridge_examples.zip">FABridge Examples (includes cheatsheets)</a></li>
							</ul>    
							
							<h4>What you'll need</h4>
							<ul>
								<li>Flex 2 SDK</li>
								<li><i>FABridge.js</i> and <i>FABridge.as</i> scripts</li>
							</ul>
							
							<h4>Recommended Directory Structure</h4>
<pre>fabridge_example01
	+--- assets
	|	+--- js
	|	|	+--- bridge
	|	|	|	+--- FABridge.js
	|	|	+--- fabridge_example01.js
	|	|
	|	+--- swf
	|		+--- bridge
	|		|	+--- FABridge.as
	|		+--- fabridge_example01.mxml
	|
	+--- index.html
</pre>				

							<h4>Installing the Bridge</h4>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-xml" start="1"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>fabridge&nbsp;example&nbsp;01</span><span class="tag">&lt;/</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comments">&lt;!--&nbsp;link&nbsp;the&nbsp;JavaScript&nbsp;side&nbsp;of&nbsp;the&nbsp;FABridge&nbsp;library&nbsp;--&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">script</span><span>&nbsp;</span><span class="attribute">language</span><span>=</span><span class="attribute-value">"JavaScript"</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">"assets/js/bridge/FABridge.js"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea style="display: none;" name="code" class="html:nocontrols" cols="30" rows="10">								&lt;html&gt;
								&lt;head&gt;
									&lt;title&gt;fabridge example 01&lt;/title&gt;
									&lt;!-- link the JavaScript side of the FABridge library --&gt;
									&lt;script language="JavaScript" src="assets/js/bridge/FABridge.js"&gt;&lt;/script&gt;
							</textarea>		
							<p class="figure_description">Installing the JavaScript Side</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-xml" start="1"><li class="alt"><span><span class="tag">&lt;?</span><span class="tag-name">xml</span><span>&nbsp;</span><span class="attribute">version</span><span>=</span><span class="attribute-value">"1.0"</span><span>&nbsp;</span><span class="attribute">encoding</span><span>=</span><span class="attribute-value">"utf-8"</span><span class="tag">?&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">mx:Application</span><span>&nbsp;</span><span class="attribute">xmlns:mx</span><span>=</span><span class="attribute-value">"http://www.adobe.com/2006/mxml"</span><span>&nbsp;</span><span class="attribute">xmlns:bridge</span><span>=</span><span class="attribute-value">"bridge.*"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">bridge:FABridge</span><span>&nbsp;</span><span class="attribute">bridgeName</span><span>=</span><span class="attribute-value">"flex"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comments">&lt;!--&nbsp;...&nbsp;rest&nbsp;of&nbsp;MXML&nbsp;...&nbsp;--&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea style="display: none;" name="code" class="html:nocontrols" cols="30" rows="10">								&lt;?xml version="1.0" encoding="utf-8"?&gt;
								&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:bridge="bridge.*"&gt;
									&lt;bridge:FABridge bridgeName="flex" /&gt;
									&lt;!-- ... rest of MXML ... --&gt;
							</textarea>	    
							<p class="figure_description">Installing the ActionScript Side</p>
							
							<h4>Creating the Flex Application Instance</h4>
							<p>
								Define a callback function to be executed after the SWF is done loading.
								You can then use the <i>flexApp</i> global variable to access anything in the embedded Flex application using JavaScript.
							</p>
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;global&nbsp;variable</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">var</span><span>&nbsp;flexApp;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span><span class="keyword">var</span><span>&nbsp;initCallback&nbsp;=&nbsp;</span><span class="keyword">function</span><span>()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;flexApp&nbsp;=&nbsp;FABridge.flex.root();&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li><li class=""><span><span class="comment">//&nbsp;register&nbsp;the&nbsp;callback&nbsp;to&nbsp;our&nbsp;Flex&nbsp;application&nbsp;with&nbsp;the&nbsp;'bridgeName'&nbsp;of&nbsp;'flex'</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>FABridge.addInitializationCallback(&nbsp;<span class="string">"flex"</span><span>,&nbsp;initCallback&nbsp;);&nbsp;&nbsp;</span></span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// global variable
								var flexApp;
								
								var initCallback = function() {
									flexApp = FABridge.flex.root();
									return;
								}
								// register the callback to our Flex application with the 'bridgeName' of 'flex'
								FABridge.addInitializationCallback( "flex", initCallback );
							</textarea>
							
							<h4>Getting ActionScript Object Properties</h4>
							<p>
								<i>&lt;actionscript_object&gt;</i> = <i>&lt;flex_app_instance&gt;.get&lt;id&gt;()</i> where <i>&lt;id&gt;</i> uses the alternate capitalization format.<br>
								<i>&lt;actionscript_object&gt;.get&lt;property_name&gt;()</i> where <i>&lt;property_name&gt;</i> uses the alternate capitalization format.
							</p>
							
							<h4>Setting ActionScript Object Properties</h4>
							<p>
								<i>&lt;actionscript_object&gt;.set&lt;property_name&gt;( &lt;property_value&gt; )</i> where <i>&lt;property_name&gt;</i> uses the alternate capitalization format.
							</p>
							
							<h4>Calling ActionScript Object Methods</h4>
							<p>
								<i>&lt;actionscript_object&gt;.&lt;actionscript_method&gt;()</i>.
							</p>
							
							<h4>Passing Functions to ActionScript</h4>
							<p>
Best demonstrated through an example of a event handler attached to a
SWF control. As the value of the SWF control changes, it updates the
value of an HTML text input control. </p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;9&nbsp;-&nbsp;attach&nbsp;event&nbsp;handler</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;attachEvent()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;object</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;define&nbsp;a&nbsp;function&nbsp;used&nbsp;as&nbsp;a&nbsp;callback&nbsp;to&nbsp;JavaScript</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;mainDishCallback&nbsp;=&nbsp;</span><span class="keyword">function</span><span>(&nbsp;event&nbsp;)&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;object&nbsp;which&nbsp;fired&nbsp;the&nbsp;event</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_source&nbsp;=&nbsp;event.getTarget();&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;as&nbsp;the&nbsp;value&nbsp;in&nbsp;the&nbsp;swf&nbsp;'main&nbsp;dish'&nbsp;changes,&nbsp;so&nbsp;does&nbsp;the&nbsp;html&nbsp;'main&nbsp;dish'</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.frm_mainMenu.frm_mainDish.value&nbsp;=&nbsp;swfObj_source.getText();&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;swfObj_mainDish.addEventListener(&nbsp;<span class="string">"change"</span><span>,&nbsp;mainDishCallback&nbsp;);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 9 - attach event handler
								function attachEvent() {
									// get the 'main dish' object
									var swfObj_mainDish = flexApp.getTxt_mainDish();
								
									// define a function used as a callback to JavaScript
									var mainDishCallback = function( event ) {
										// get the object which fired the event
										var swfObj_source = event.getTarget();
										// as the value in the swf 'main dish' changes, so does the html 'main dish'
										document.frm_mainMenu.frm_mainDish.value = swfObj_source.getText();
										
										return;
									}
									swfObj_mainDish.addEventListener( "change", mainDishCallback );
									
									return;
								}
							</textarea>
							
							<h4>Exception Handling</h4>
							<ul>
								<li>Use try/catch blocks in your JavaScript to surround potential offending code.</li>
								<li>At the very least, you will get an error ID back from the bridge.</li>
								<li>If
you install the Flash Player Content Debugger, you gain access to error
descriptions, line number, file name, and stack trace. </li><li>Check the links section or the cheatsheets on how to get the Content Debugger.</li>
							</ul>						

			            </div>
						                        
			            <div style="display: none;" id="article" class="ui_tab_content">

							<h3>10 Steps to Mastering the Adobe Flex-Ajax Bridge (FABridge)</h3>
							<div class="article_date">June 15, 2007</div>
							<div class="article_author">by <a href="mailto:bmason@skipslate.com">Brice Mason</a></div>
							<div class="print-friendly"><a href="http://www.skipslate.com/print/mastering_fabridge.cfm" target="_blank">Print-Friendly Version</a></div>
						<p>
Although currently in beta state, the Adobe Flex-Ajax Bridge (FABridge)
has proven to be a simple, easy to use library which exposes Flex
applications to traditional DHTML applications. However, current
documentation, code samples, and general misinformation are preventing
the exercising of this important technology. This article will present
10 simple steps to becoming a master of the FABridge. </p>
						
						<h4>What's So Special About the FABridge?</h4>
						<p>
The FABridge library is a complete solution which exposes the
ActionScript objects residing in a Flex application to the JavaScript
environment in your DHTML applications. Without this library, you would
need to write your own custom, inherently limited library to enable
this functionality. In short, the FABridge opens the door to an
incredible number of creative and interesting opportunities. While this
library allows you to introduce complex UI elements to your traditional
DHTML applications, the process is quite simple. </p>
						
						<p> The following 10 steps will walk through
the generation of an example application which utilizes all the key
features of the FABridge. The example is meant to focus on the core
uses the developer would incorporate in their own applications. </p>
						
						<h4>Step 1: Gathering Materials</h4>
						<p>
Before we can start coding, we'll need to run through our checklist of
materials required to use the FABridge. The following materials are
required to complete the development of the example application: </p><ul>
								<li>Flex 2 SDK</li>
								<li><i>FABridge.js</i> and <i>FABridge.as</i> scripts</li>
							</ul>
Specific suggestions on where to get these materials can be found in
the links section or in the cheatsheets download included in this
article. Optionally, you may want to download the Flash Player Content
Debugger for IE or Netscape-compliant browsers. This will enable robust
exception handling data to come across the bridge from ActionScript to
JavaScript. <p></p>
						
						<h4>Step 2: Defining the Directory Structure</h4>
						<p>
Now that we have the necessary tools, we can begin shelling out the
framework for the example application. Let's start by creating the
directory structure and creating/saving the files listed in Figure 1.1
under your web root. The <i>fabridge_example01.mxml</i>, <i>index.html</i>, and <i>fabridge_example01.js</i> files can be empty at this point.

</p><pre>fabridge_example01
	+--- assets
	|	+--- js
	|	|	+--- bridge
	|	|	|	+--- FABridge.js
	|	|	+--- fabridge_example01.js
	|	|
	|	+--- swf
	|		+--- bridge
	|		|	+--- FABridge.as
	|		+--- fabridge_example01.mxml
	|
	+--- index.html
</pre>
<p class="figure_description">Figure 1.1 - Defining the Directory Structure</p>
						<p></p>
						
						<h4>Step 3: Linking the Bridge</h4>
						<p>
							We can start by entering the code in Figure 1.2 in the <i>/fabridge_example01/index.html</i>
file which is the minimum amount of code used to embed the SWF in
Netscape compatible browsers. The buttons defined in the HTML form will
help us invoke the different functions as we step through all the
functionality of the FABridge. </p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-xml" start="1"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>fabridge&nbsp;example&nbsp;01</span><span class="tag">&lt;/</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comments">&lt;!--&nbsp;link&nbsp;the&nbsp;JavaScript&nbsp;side&nbsp;of&nbsp;the&nbsp;FABridge&nbsp;library&nbsp;--&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">script</span><span>&nbsp;</span><span class="attribute">language</span><span>=</span><span class="attribute-value">"JavaScript"</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">"assets/js/bridge/FABridge.js"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">script</span><span>&nbsp;</span><span class="attribute">language</span><span>=</span><span class="attribute-value">"JavaScript"</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">"assets/js/fabridge_example01.js"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h3</span><span class="tag">&gt;</span><span>FABridge&nbsp;Example&nbsp;01</span><span class="tag">&lt;/</span><span class="tag-name">h3</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comments">&lt;!--&nbsp;embed&nbsp;the&nbsp;flex&nbsp;application&nbsp;swf&nbsp;--&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">embed</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">"assets/swf/fabridge_example01.swf"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comments">&lt;!--&nbsp;define&nbsp;a&nbsp;simple&nbsp;HTML&nbsp;form.&nbsp;--&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">form</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"frm_mainMenu"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text"</span><span>&nbsp;&nbsp;&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"frm_mainDish"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">""</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;5&nbsp;-&nbsp;Get&nbsp;ActionScript&nbsp;Objects&nbsp;by&nbsp;ID"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"getId();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;6&nbsp;-&nbsp;Get&nbsp;ActionScript&nbsp;Property&nbsp;Values"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"getProperty();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;7&nbsp;-&nbsp;Set&nbsp;ActionScript&nbsp;Property&nbsp;Values"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"setProperty();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;8&nbsp;-&nbsp;Calling&nbsp;ActionScript&nbsp;Object&nbsp;Methods"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"callObjectMethod();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;9&nbsp;-&nbsp;Attach&nbsp;Event&nbsp;Handler"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"attachEvent();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">form</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;/</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea style="display: none;" name="code" class="html:nocontrols" cols="30" rows="10">
&lt;html&gt; &lt;head&gt; &lt;title&gt;fabridge example
01&lt;/title&gt; &lt;!-- link the JavaScript side of the FABridge
library --&gt; &lt;script language="JavaScript"
src="assets/js/bridge/FABridge.js"&gt;&lt;/script&gt; &lt;script
language="JavaScript"
src="assets/js/fabridge_example01.js"&gt;&lt;/script&gt; &lt;/head&gt;
&lt;body&gt; &lt;h3&gt;FABridge Example 01&lt;/h3&gt; &lt;!-- embed the
flex application swf --&gt; &lt;embed
src="assets/swf/fabridge_example01.swf" /&gt; &lt;!-- define a simple
HTML form. --&gt; &lt;form name="frm_mainMenu"&gt; &lt;input
type="text" name="frm_mainDish" value="" /&gt;&lt;br/&gt; &lt;input
type="button" value="Step 5 - Get ActionScript Objects by ID"
onclick="getId();" /&gt;&lt;br/&gt; &lt;input type="button" value="Step
6 - Get ActionScript Property Values" onclick="getProperty();"
/&gt;&lt;br/&gt; &lt;input type="button" value="Step 7 - Set
ActionScript Property Values" onclick="setProperty();" /&gt;&lt;br/&gt;
&lt;input type="button" value="Step 8 - Calling ActionScript Object
Methods" onclick="callObjectMethod();" /&gt;&lt;br/&gt; &lt;input
type="button" value="Step 9 - Attach Event Handler"
onclick="attachEvent();" /&gt; &lt;/form&gt; &lt;/body&gt;
&lt;/html&gt; </textarea>
							<p class="figure_description">Figure 1.2 - /fabridge_example01/index.html</p>
							
							<p>
								Next, enter the code in Figure 1.3 in the <i>/fabridge_example01/assets/swf/fabridge_example01.mxml</i> file.
							</p>

							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-xml" start="1"><li class="alt"><span><span class="tag">&lt;?</span><span class="tag-name">xml</span><span>&nbsp;</span><span class="attribute">version</span><span>=</span><span class="attribute-value">"1.0"</span><span>&nbsp;</span><span class="attribute">encoding</span><span>=</span><span class="attribute-value">"utf-8"</span><span class="tag">?&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">mx:Application</span><span>&nbsp;</span><span class="attribute">xmlns:mx</span><span>=</span><span class="attribute-value">"http://www.adobe.com/2006/mxml"</span><span>&nbsp;</span><span class="attribute">xmlns:bridge</span><span>=</span><span class="attribute-value">"bridge.*"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">bridge:FABridge</span><span>&nbsp;</span><span class="attribute">bridgeName</span><span>=</span><span class="attribute-value">"flex"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">mx:TextInput</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"txt_mainDish"</span><span>&nbsp;</span><span class="attribute">text</span><span>=</span><span class="attribute-value">"Chicken&nbsp;Yaya"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">mx:Application</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea style="display: none;" name="code" class="html:nocontrols" cols="30" rows="10">								&lt;?xml version="1.0" encoding="utf-8"?&gt;
								&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:bridge="bridge.*"&gt;
									&lt;bridge:FABridge bridgeName="flex" /&gt;
									&lt;mx:TextInput id="txt_mainDish" text="Chicken Yaya" /&gt;
								&lt;/mx:Application&gt;
							</textarea>
							<p class="figure_description">Figure 1.3 - /fabridge_example01/assets/swf/fabridge_example01.mxml</p>
							
							<p>
The key to linking the ActionScript side of the FABridge library to
your MXML source is to properly define the namespace it will operate
in. Line 2 of Figure 1.3 shows the added definition of the <i>bridge</i> namespace which imports all components found under the <i>bridge</i> directory. Since the <i>FABridge.as</i> script contains the <i>FABridge</i> class definition of the <i>bridge</i>
package, it becomes even more important to maintain the directory
structure described in Figure 1.1. Without the directory integrity in
check, compilation of the MXML source file will fail. Line 3 of Figure
1.3 defines the name of the bridge which you will refer to in your
JavaScript code when referencing the Flex application instance. </p>
							
							<p>
								Let's continue the exercise by compiling the <i>/fabridge_example01/assets/swf/fabridge_example01.mxml</i> source file using the following command.

</p><pre><i>&lt;path_to_flex_sdk&gt;</i>/bin/mxmlc <i>&lt;web_root&gt;</i>/fabridge_example01/assets/swf/fabridge_example01.mxml
</pre>
							<p></p>
							
							<p>
								This command will generate a .swf file at <i>/fabridge_example01/assets/swf/fabridge_example01.swf</i>. Note that at this point, you will not need the <i>bridge</i> folder nor the MXML source file located under the <i>/fabridge_example01/assets/swf/</i>
folder for the application to operate. The FABridge ActionScript
component is already compiled into the resulting SWF file. Since we are
still developing our exercise we'll leave everything intact. Browsing
to the example application should yield a screen similar to Figure 1.4.
</p>
							
							<div style="width: 38.5%; height: 117%;">
								<img src="mastering_fabridge.cfm_files/figure_1-4.jpg">
							</div>
							<p class="figure_description">Figure 1.4 - Example Application</p>
							
							<h4>Step 4: Creating the Flex Application Instance</h4>
							<p>
Now that the FABridge is linked in both the JavaScript and ActionScript
environments, we can start to shell out the JavaScript library we'll
develop to invoke the functionality of the FABridge. Enter the code in
Figure 1.5 in <i>/fabridge_example01/assets/js/fabridge_example01.js</i>.
							</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;global&nbsp;variable</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">var</span><span>&nbsp;flexApp;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span><span class="keyword">var</span><span>&nbsp;initCallback&nbsp;=&nbsp;</span><span class="keyword">function</span><span>()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;flexApp&nbsp;=&nbsp;FABridge.flex.root();&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li><li class=""><span><span class="comment">//&nbsp;register&nbsp;the&nbsp;callback&nbsp;to&nbsp;our&nbsp;Flex&nbsp;application&nbsp;with&nbsp;the&nbsp;'bridgeName'&nbsp;of&nbsp;'flex'</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>FABridge.addInitializationCallback(&nbsp;<span class="string">"flex"</span><span>,&nbsp;initCallback&nbsp;);&nbsp;&nbsp;</span></span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// global variable
								var flexApp;
								
								var initCallback = function() {
									flexApp = FABridge.flex.root();
									return;
								}
								// register the callback to our Flex application with the 'bridgeName' of 'flex'
								FABridge.addInitializationCallback( "flex", initCallback );
							</textarea>
							<p class="figure_description">Figure 1.5 - /fabridge_example01/assets/js/fabridge_example01.js</p>
							
							<p>
What we've done in Figure 1.5 is enable the FABridge to load the
instance of the Flex application with the bridge name of <i>flex</i> automatically. The object holding the instance of the Flex application is stored globally in the variable named <i>flexApp</i>.
As we begin to define and use the remaining functions in this library,
we will be able to continually reference the Flex application using
this global variable. </p>
							
							<h4>Step 5: Get ActionScript Objects By ID</h4>
							<p>
Perhaps the most important idea to understand when using the FABridge
library is gaining access to an ActionScript object through it's <i>ID</i> property. This is accomplished by calling the object not by traditional <i>object.property</i> notation, but rather by calling it as a function. Let's start by modifying our <i>fabridge_example01.js</i> file by including the code in Figure 1.6.
							</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;5&nbsp;-&nbsp;get&nbsp;objects&nbsp;by&nbsp;ID</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;getId()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;<span class="string">"Got&nbsp;the&nbsp;object,&nbsp;it's&nbsp;ID&nbsp;is&nbsp;'"</span><span>&nbsp;+&nbsp;swfObj_mainDish.getId()&nbsp;+&nbsp;</span><span class="string">"'"</span><span>&nbsp;);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 5 - get objects by ID
								function getId() {
									var swfObj_mainDish = flexApp.getTxt_mainDish();
									alert( "Got the object, it's ID is '" + swfObj_mainDish.getId() + "'" );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.6 - Getting an ActionScript object by ID</p>
							
							<p>
								As you'll recall in Figure 1.3, we have defined a TextInput control in our Flex application with an ID of <i>txt_mainDish</i>.
Normally, in the ActionScript world, we would reference this object
purely by the ID property. Using JavaScript and the FABridge, we
reference it as a method of the Flex application instance object <i>flexApp</i>. Whenever we <i>get</i> properties from ActionScript objects in this way, we use the format <i>&lt;actionscript_object&gt;.get&lt;property_name&gt;()</i> where <i>&lt;property_name&gt;</i> is formatted using alternate capitalization. Let's move on to step 6 to seal this idea.
							</p>
							
							<h4>Step 6: Get Properties of ActionScript Objects</h4>
							<p>
Although this is functionally the same as step 5, the gaining of access
to properties of ActionScript objects obviously can't occur without the
reference to the object itself which is what we did in step 5. To drive
this idea home, modify your <i>fabridge_example01.js</i> script to include the function in Figure 1.7.
							</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;6&nbsp;-&nbsp;get&nbsp;object&nbsp;properties</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;getProperty()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;'mainDish'&nbsp;object</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;show&nbsp;what's&nbsp;for&nbsp;dinner</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;<span class="string">"Delicious,&nbsp;we're&nbsp;having&nbsp;"</span><span>&nbsp;+&nbsp;swfObj_mainDish.getText()&nbsp;+&nbsp;</span><span class="string">"&nbsp;for&nbsp;dinner!"</span><span>&nbsp;);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 6 - get object properties
								function getProperty() {
									// get the 'mainDish' object
									var swfObj_mainDish = flexApp.getTxt_mainDish();
									// show what's for dinner
									alert( "Delicious, we're having " + swfObj_mainDish.getText() + " for dinner!" );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.7 - Getting ActionScript Object Properties</p>
							
							<p>
								Figure 1.7 demonstrates getting the <i>text</i> property of the <i>TextInput</i>
ActionScript class. All you need to know is the format to follow to
gain access to any and all properties of ActionScript objects residing
in your Flex applications. Let's move on to modifying properties. </p>
							
							<h4>Step 7: Set Properties of ActionScript Objects</h4>
							<p>
								If you got the idea surrounding steps 5 and 6, you'll find step 7 even easier. Much in the same way that we <i>get</i> properties, we <i>set</i> them in virtually the same way. To set properties of ActionScript objects, simple use the format <i>&lt;actionscript_object&gt;.set&lt;property_name&gt;( &lt;property_value&gt; )</i>. Let's try an example to demonstrate. Modify your <i>fabridge_example01.js</i> script to include the function found in Figure 1.8.
							</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;7&nbsp;-&nbsp;set&nbsp;object&nbsp;properties</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;setProperty()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;there's&nbsp;a&nbsp;special&nbsp;tonight</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;str_special&nbsp;=&nbsp;</span><span class="string">"cheeseburgers"</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;object</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;what's&nbsp;the&nbsp;main&nbsp;dish?</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;<span class="string">"We&nbsp;currently&nbsp;offer&nbsp;"</span><span>&nbsp;+&nbsp;swfObj_mainDish.getText()&nbsp;+&nbsp;</span><span class="string">"."</span><span>&nbsp;);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;switch&nbsp;it&nbsp;up,&nbsp;we'll&nbsp;have&nbsp;the&nbsp;special.</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;swfObj_mainDish.setText(&nbsp;str_special&nbsp;);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;<span class="string">"I&nbsp;changed&nbsp;my&nbsp;mind,&nbsp;I'm&nbsp;having&nbsp;the&nbsp;special&nbsp;which&nbsp;is&nbsp;"</span><span>&nbsp;+&nbsp;swfObj_mainDish.getText()&nbsp;+&nbsp;</span><span class="string">"."</span><span>&nbsp;);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 7 - set object properties
								function setProperty() {
									// there's a special tonight
									var str_special = "cheeseburgers";
									// get the 'main dish' object
									var swfObj_mainDish = flexApp.getTxt_mainDish();
									// what's the main dish?
									alert( "We currently offer " + swfObj_mainDish.getText() + "." );
									// switch it up, we'll have the special.
									swfObj_mainDish.setText( str_special );
									alert( "I changed my mind, I'm having the special which is " + swfObj_mainDish.getText() + "." );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.8 - Set Properties of ActionScript Objects</p>
							
							<p>
								You'll notice that when we run this example by clicking the corresponding button in <i>index.html</i>,
that the actual TextInput control in the Flex application updates to
reflect the new special. Now we're really learning some very powerful
ideas by applying simple concepts. Let's move on to calling
ActionScript object methods. </p>
							
							<h4>Step 8: Calling ActionScript Object Methods</h4>
							<p>
Just as all properties of ActionScript objects are available to us, so
are their methods. There is no special notation involved here, we just
need access to the ActionScript object as we have been doing all along.
Modify your <i>fabridge_example01.js</i> script to include the function in Figure 1.9.
							</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;8&nbsp;-&nbsp;call&nbsp;object&nbsp;methods</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;callObjectMethod()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;object</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;set&nbsp;focus&nbsp;to&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;TextInput</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;swfObj_mainDish.setFocus();&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;select&nbsp;some&nbsp;text&nbsp;in&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;TextInput</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;swfObj_mainDish.setSelection(&nbsp;1,&nbsp;2&nbsp;);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 8 - call object methods
								function callObjectMethod() {
									// get the 'main dish' object
									var swfObj_mainDish = flexApp.getTxt_mainDish();
									// set focus to the 'main dish' TextInput
									swfObj_mainDish.setFocus();
									// select some text in the 'main dish' TextInput
									swfObj_mainDish.setSelection( 1, 2 );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.9 - Calling ActionScript Object Methods</p>
							
							<p>
At this point, you're probably picking up steam and becoming more and
more familiar with how the FABridge exposes ActionScript objects to
your JavaScript. Once you start to understand that there are really
only a couple of core techniques, the rest is very intuitive. The
example in Figure 1.9 brings focus to the TextInput in the Flex
application and selects a couple of characters in the control. </p>
							
							<h4>Step 9: Passing Functions to ActionScript</h4>
							<p>
The FABridge also allows us to pass functions to ActionScript. One very
useful technique is to attach event handlers to ActionScript objects.
Modify your <i>fabridge_example01.js</i> script to include the function in Figure 1.10.
							</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;9&nbsp;-&nbsp;attach&nbsp;event&nbsp;handler</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;attachEvent()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;object</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;define&nbsp;a&nbsp;function&nbsp;used&nbsp;as&nbsp;a&nbsp;callback&nbsp;to&nbsp;JavaScript</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;mainDishCallback&nbsp;=&nbsp;</span><span class="keyword">function</span><span>(&nbsp;event&nbsp;)&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;object&nbsp;which&nbsp;fired&nbsp;the&nbsp;event</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_source&nbsp;=&nbsp;event.getTarget();&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;as&nbsp;the&nbsp;value&nbsp;in&nbsp;the&nbsp;swf&nbsp;'main&nbsp;dish'&nbsp;changes,&nbsp;so&nbsp;does&nbsp;the&nbsp;html&nbsp;'main&nbsp;dish'</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.frm_mainMenu.frm_mainDish.value&nbsp;=&nbsp;swfObj_source.getText();&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;swfObj_mainDish.addEventListener(&nbsp;<span class="string">"change"</span><span>,&nbsp;mainDishCallback&nbsp;);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 9 - attach event handler
								function attachEvent() {
									// get the 'main dish' object
									var swfObj_mainDish = flexApp.getTxt_mainDish();
								
									// define a function used as a callback to JavaScript
									var mainDishCallback = function( event ) {
										// get the object which fired the event
										var swfObj_source = event.getTarget();
										// as the value in the swf 'main dish' changes, so does the html 'main dish'
										document.frm_mainMenu.frm_mainDish.value = swfObj_source.getText();
										
										return;
									}
									swfObj_mainDish.addEventListener( "change", mainDishCallback );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.10 - Attaching Events to ActionScript Objects</p>
							
							<p>
Figure 1.10 is a little more complicated so let's walk through it. We
begin on line 4 by accessing the TextInput ActionScript object just as
we have been. Our callback function defined on lines 7-14 is used to
hook the ActionScript object we chose to attach to into the JavaScript
environment. Line 9 demonstrates gaining access to the object the event
was attached to by evaluating the <i>target</i> property of the ActionScript <i>Event</i>
class. Line 11 accesses the HTML text input control to update its value
with the value currently stored in the TextInput in the Flex
application. Run this example by clicking the corresponding button in
the <i>index.html</i> page. As you change the value of the main dish in the SWF, you should see the HTML text input update.
							</p>
							
							<h4>Step 10: Exception Handling</h4>
							<p>
The final piece of this puzzle involves handling for exceptions that
may come across the bridge from ActionScript to JavaScript. This is
accomplished by simply using try/catch blocks in your JavaScript code
where the potential exists for error in your ActionScript. By default,
when catching exceptions thrown by ActionScript to JavaScript, you will
always have the value of the error code at the very least. However, if
you install the Flash Player Content Debugger, you will enable more
robust information to come across the bridge such as description, line
number, file name, and stack trace. For more information on how to get
this feature, please see either the <i>Links</i>
section of this article, or the cheatsheets included as part of this
download. The download included in this article contains a
demonstration of catching exceptions in JavaScript thrown by
ActionScript. </p>
							
							<p> A great deal of potential exists for
creating interesting and innovative applications which utilize this
compact library. Please visit the download section of this article for
some useful examples and cheatsheets. They should serve as handy
references when developing your own applications using the FABridge. </p>
						
			            </div>
                        
			            <div style="display: none;" id="code" class="ui_tab_content">

							<h3>10 Steps to Mastering the Adobe Flex-Ajax Bridge (FABridge)</h3>
							<h4>Code, Figures, Tables</h4>
 
<pre>fabridge_example01
	+--- assets
	|	+--- js
	|	|	+--- bridge
	|	|	|	+--- FABridge.js
	|	|	+--- fabridge_example01.js
	|	|
	|	+--- swf
	|		+--- bridge
	|		|	+--- FABridge.as
	|		+--- fabridge_example01.mxml
	|
	+--- index.html
</pre>
<p class="figure_description">Figure 1.1 - Defining the Directory Structure</p>

							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-xml" start="1"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>fabridge&nbsp;example&nbsp;01</span><span class="tag">&lt;/</span><span class="tag-name">title</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comments">&lt;!--&nbsp;link&nbsp;the&nbsp;JavaScript&nbsp;side&nbsp;of&nbsp;the&nbsp;FABridge&nbsp;library&nbsp;--&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">script</span><span>&nbsp;</span><span class="attribute">language</span><span>=</span><span class="attribute-value">"JavaScript"</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">"assets/js/bridge/FABridge.js"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">script</span><span>&nbsp;</span><span class="attribute">language</span><span>=</span><span class="attribute-value">"JavaScript"</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">"assets/js/fabridge_example01.js"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">h3</span><span class="tag">&gt;</span><span>FABridge&nbsp;Example&nbsp;01</span><span class="tag">&lt;/</span><span class="tag-name">h3</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comments">&lt;!--&nbsp;embed&nbsp;the&nbsp;flex&nbsp;application&nbsp;swf&nbsp;--&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">embed</span><span>&nbsp;</span><span class="attribute">src</span><span>=</span><span class="attribute-value">"assets/swf/fabridge_example01.swf"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comments">&lt;!--&nbsp;define&nbsp;a&nbsp;simple&nbsp;HTML&nbsp;form.&nbsp;--&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">form</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"frm_mainMenu"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text"</span><span>&nbsp;&nbsp;&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"frm_mainDish"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">""</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;5&nbsp;-&nbsp;Get&nbsp;ActionScript&nbsp;Objects&nbsp;by&nbsp;ID"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"getId();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;6&nbsp;-&nbsp;Get&nbsp;ActionScript&nbsp;Property&nbsp;Values"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"getProperty();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;7&nbsp;-&nbsp;Set&nbsp;ActionScript&nbsp;Property&nbsp;Values"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"setProperty();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;8&nbsp;-&nbsp;Calling&nbsp;ActionScript&nbsp;Object&nbsp;Methods"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"callObjectMethod();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span class="tag">&lt;</span><span class="tag-name">br</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Step&nbsp;9&nbsp;-&nbsp;Attach&nbsp;Event&nbsp;Handler"</span><span>&nbsp;</span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"attachEvent();"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">form</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;/</span><span class="tag-name">html</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea style="display: none;" name="code" class="html:nocontrols" cols="30" rows="10">
&lt;html&gt; &lt;head&gt; &lt;title&gt;fabridge example
01&lt;/title&gt; &lt;!-- link the JavaScript side of the FABridge
library --&gt; &lt;script language="JavaScript"
src="assets/js/bridge/FABridge.js"&gt;&lt;/script&gt; &lt;script
language="JavaScript"
src="assets/js/fabridge_example01.js"&gt;&lt;/script&gt; &lt;/head&gt;
&lt;body&gt; &lt;h3&gt;FABridge Example 01&lt;/h3&gt; &lt;!-- embed the
flex application swf --&gt; &lt;embed
src="assets/swf/fabridge_example01.swf" /&gt; &lt;!-- define a simple
HTML form. --&gt; &lt;form name="frm_mainMenu"&gt; &lt;input
type="text" name="frm_mainDish" value="" /&gt;&lt;br/&gt; &lt;input
type="button" value="Step 5 - Get ActionScript Objects by ID"
onclick="getId();" /&gt;&lt;br/&gt; &lt;input type="button" value="Step
6 - Get ActionScript Property Values" onclick="getProperty();"
/&gt;&lt;br/&gt; &lt;input type="button" value="Step 7 - Set
ActionScript Property Values" onclick="setProperty();" /&gt;&lt;br/&gt;
&lt;input type="button" value="Step 8 - Calling ActionScript Object
Methods" onclick="callObjectMethod();" /&gt;&lt;br/&gt; &lt;input
type="button" value="Step 9 - Attach Event Handler"
onclick="attachEvent();" /&gt; &lt;/form&gt; &lt;/body&gt;
&lt;/html&gt; </textarea>
							<p class="figure_description">Figure 1.2 - /fabridge_example01/index.html</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-xml" start="1"><li class="alt"><span><span class="tag">&lt;?</span><span class="tag-name">xml</span><span>&nbsp;</span><span class="attribute">version</span><span>=</span><span class="attribute-value">"1.0"</span><span>&nbsp;</span><span class="attribute">encoding</span><span>=</span><span class="attribute-value">"utf-8"</span><span class="tag">?&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="tag">&lt;</span><span class="tag-name">mx:Application</span><span>&nbsp;</span><span class="attribute">xmlns:mx</span><span>=</span><span class="attribute-value">"http://www.adobe.com/2006/mxml"</span><span>&nbsp;</span><span class="attribute">xmlns:bridge</span><span>=</span><span class="attribute-value">"bridge.*"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">bridge:FABridge</span><span>&nbsp;</span><span class="attribute">bridgeName</span><span>=</span><span class="attribute-value">"flex"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">mx:TextInput</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"txt_mainDish"</span><span>&nbsp;</span><span class="attribute">text</span><span>=</span><span class="attribute-value">"Chicken&nbsp;Yaya"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">mx:Application</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea style="display: none;" name="code" class="html:nocontrols" cols="30" rows="10">								&lt;?xml version="1.0" encoding="utf-8"?&gt;
								&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:bridge="bridge.*"&gt;
									&lt;bridge:FABridge bridgeName="flex" /&gt;
									&lt;mx:TextInput id="txt_mainDish" text="Chicken Yaya" /&gt;
								&lt;/mx:Application&gt;
							</textarea>
							<p class="figure_description">Figure 1.3 - /fabridge_example01/assets/swf/fabridge_example01.mxml</p>	
							<p></p>
							
							<div style="width: 38.5%; height: 117%;">
								<img src="mastering_fabridge.cfm_files/figure_1-4.jpg">
							</div>
							<p class="figure_description">Figure 1.4 - Example Application</p>		
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;global&nbsp;variable</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">var</span><span>&nbsp;flexApp;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span><span class="keyword">var</span><span>&nbsp;initCallback&nbsp;=&nbsp;</span><span class="keyword">function</span><span>()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;flexApp&nbsp;=&nbsp;FABridge.flex.root();&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li><li class=""><span><span class="comment">//&nbsp;register&nbsp;the&nbsp;callback&nbsp;to&nbsp;our&nbsp;Flex&nbsp;application&nbsp;with&nbsp;the&nbsp;'bridgeName'&nbsp;of&nbsp;'flex'</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>FABridge.addInitializationCallback(&nbsp;<span class="string">"flex"</span><span>,&nbsp;initCallback&nbsp;);&nbsp;&nbsp;</span></span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// global variable
								var flexApp;
								
								var initCallback = function() {
									flexApp = FABridge.flex.root();
									return;
								}
								// register the callback to our Flex application with the 'bridgeName' of 'flex'
								FABridge.addInitializationCallback( "flex", initCallback );
							</textarea>
							<p class="figure_description">Figure 1.5 - /fabridge_example01/assets/js/fabridge_example01.js</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;5&nbsp;-&nbsp;get&nbsp;objects&nbsp;by&nbsp;ID</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;getId()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;<span class="string">"Got&nbsp;the&nbsp;object,&nbsp;it's&nbsp;ID&nbsp;is&nbsp;'"</span><span>&nbsp;+&nbsp;swfObj_mainDish.getId()&nbsp;+&nbsp;</span><span class="string">"'"</span><span>&nbsp;);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 5 - get objects by ID
								function getId() {
									var swfObj_mainDish = flexApp.getTxt_mainDish();
									alert( "Got the object, it's ID is '" + swfObj_mainDish.getId() + "'" );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.6 - Getting an ActionScript object by ID</p>		
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;6&nbsp;-&nbsp;get&nbsp;object&nbsp;properties</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;getProperty()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;'mainDish'&nbsp;object</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;show&nbsp;what's&nbsp;for&nbsp;dinner</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;<span class="string">"Delicious,&nbsp;we're&nbsp;having&nbsp;"</span><span>&nbsp;+&nbsp;swfObj_mainDish.getText()&nbsp;+&nbsp;</span><span class="string">"&nbsp;for&nbsp;dinner!"</span><span>&nbsp;);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 6 - get object properties
								function getProperty() {
									// get the 'mainDish' object
									var swfObj_mainDish = flexApp.getTxt_mainDish();
									// show what's for dinner
									alert( "Delicious, we're having " + swfObj_mainDish.getText() + " for dinner!" );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.7 - Getting ActionScript Object Properties</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;7&nbsp;-&nbsp;set&nbsp;object&nbsp;properties</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;setProperty()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;there's&nbsp;a&nbsp;special&nbsp;tonight</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;str_special&nbsp;=&nbsp;</span><span class="string">"cheeseburgers"</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;object</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;what's&nbsp;the&nbsp;main&nbsp;dish?</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;<span class="string">"We&nbsp;currently&nbsp;offer&nbsp;"</span><span>&nbsp;+&nbsp;swfObj_mainDish.getText()&nbsp;+&nbsp;</span><span class="string">"."</span><span>&nbsp;);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;switch&nbsp;it&nbsp;up,&nbsp;we'll&nbsp;have&nbsp;the&nbsp;special.</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;swfObj_mainDish.setText(&nbsp;str_special&nbsp;);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;alert(&nbsp;<span class="string">"I&nbsp;changed&nbsp;my&nbsp;mind,&nbsp;I'm&nbsp;having&nbsp;the&nbsp;special&nbsp;which&nbsp;is&nbsp;"</span><span>&nbsp;+&nbsp;swfObj_mainDish.getText()&nbsp;+&nbsp;</span><span class="string">"."</span><span>&nbsp;);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 7 - set object properties
								function setProperty() {
									// there's a special tonight
									var str_special = "cheeseburgers";
									// get the 'main dish' object
									var swfObj_mainDish = flexApp.getTxt_mainDish();
									// what's the main dish?
									alert( "We currently offer " + swfObj_mainDish.getText() + "." );
									// switch it up, we'll have the special.
									swfObj_mainDish.setText( str_special );
									alert( "I changed my mind, I'm having the special which is " + swfObj_mainDish.getText() + "." );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.8 - Set Properties of ActionScript Objects</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;8&nbsp;-&nbsp;call&nbsp;object&nbsp;methods</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;callObjectMethod()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;object</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;set&nbsp;focus&nbsp;to&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;TextInput</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;swfObj_mainDish.setFocus();&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;select&nbsp;some&nbsp;text&nbsp;in&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;TextInput</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;swfObj_mainDish.setSelection(&nbsp;1,&nbsp;2&nbsp;);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 8 - call object methods
								function callObjectMethod() {
									// get the 'main dish' object
									var swfObj_mainDish = flexApp.getTxt_mainDish();
									// set focus to the 'main dish' TextInput
									swfObj_mainDish.setFocus();
									// select some text in the 'main dish' TextInput
									swfObj_mainDish.setSelection( 1, 2 );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.9 - Calling ActionScript Object Methods</p>
							
							<div class="dp-highlighter"><div class="bar"></div><ol class="dp-c" start="1"><li class="alt"><span><span class="comment">//&nbsp;step&nbsp;9&nbsp;-&nbsp;attach&nbsp;event&nbsp;handler</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;attachEvent()&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;'main&nbsp;dish'&nbsp;object</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_mainDish&nbsp;=&nbsp;flexApp.getTxt_mainDish();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;define&nbsp;a&nbsp;function&nbsp;used&nbsp;as&nbsp;a&nbsp;callback&nbsp;to&nbsp;JavaScript</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;mainDishCallback&nbsp;=&nbsp;</span><span class="keyword">function</span><span>(&nbsp;event&nbsp;)&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;get&nbsp;the&nbsp;object&nbsp;which&nbsp;fired&nbsp;the&nbsp;event</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;swfObj_source&nbsp;=&nbsp;event.getTarget();&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//&nbsp;as&nbsp;the&nbsp;value&nbsp;in&nbsp;the&nbsp;swf&nbsp;'main&nbsp;dish'&nbsp;changes,&nbsp;so&nbsp;does&nbsp;the&nbsp;html&nbsp;'main&nbsp;dish'</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.frm_mainMenu.frm_mainDish.value&nbsp;=&nbsp;swfObj_source.getText();&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;swfObj_mainDish.addEventListener(&nbsp;<span class="string">"change"</span><span>,&nbsp;mainDishCallback&nbsp;);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">return</span><span>;&nbsp;&nbsp;</span></span></li><li class=""><span>}&nbsp;&nbsp;</span></li></ol></div><textarea style="display: none;" name="code" class="javascript:nocontrols" cols="30" rows="10">								// step 9 - attach event handler
								function attachEvent() {
									// get the 'main dish' object
									var swfObj_mainDish = flexApp.getTxt_mainDish();
								
									// define a function used as a callback to JavaScript
									var mainDishCallback = function( event ) {
										// get the object which fired the event
										var swfObj_source = event.getTarget();
										// as the value in the swf 'main dish' changes, so does the html 'main dish'
										document.frm_mainMenu.frm_mainDish.value = swfObj_source.getText();
										
										return;
									}
									swfObj_mainDish.addEventListener( "change", mainDishCallback );
									
									return;
								}
							</textarea>
							<p class="figure_description">Figure 1.10 - Attaching Events to ActionScript Objects</p>																																																			
                                 
			            </div>
						<div style="display: none;" id="download" class="ui_tab_content">
							<h3>10 Steps to Mastering the Adobe Flex-Ajax Bridge (FABridge)</h3>
							<h4>Downloads</h4>
                            
							<ul>
								<li><a target="_blank" href="http://www.skipslate.com/assets/download/4/fabridge_cheatsheets.pdf">FABridge Cheatsheets</a></li>
								<li><a href="http://www.skipslate.com/assets/download/4/fabridge_examples.zip">FABridge Examples (includes cheatsheets)</a></li>
							</ul>   

						</div>

						<div style="display: none;" id="link" class="ui_tab_content">
							<h3>10 Steps to Mastering the Adobe Flex-Ajax Bridge (FABridge)</h3>
							<h4>Links</h4>
                            
                            <ul>
								<li>Flex 2 SDK: <a target="_blank" href="http://www.adobe.com/products/flex/sdk/">http://www.adobe.com/products/flex/sdk/</a></li>
								<li>LiveCycle Data Services: <a target="_blank" href="http://www.adobe.com/products/livecycle/dataservices/">http://www.adobe.com/products/livecycle/dataservices/</a></li>
								<li>Flash Player Downloads: <a target="_blank" href="http://www.adobe.com/support/flashplayer/downloads.html">http://www.adobe.com/support/flashplayer/downloads.html</a></li>
                            	<li>Flex 2 Compiler Error Listing: <a target="_blank" href="http://livedocs.adobe.com/flex/201/langref/compilerErrors.html">http://livedocs.adobe.com/flex/201/langref/compilerErrors.html</a></li>
								<li>Flex 2 Compiler Warning Listing: <a target="_blank" href="http://livedocs.adobe.com/flex/201/langref/compilerWarnings.html">http://livedocs.adobe.com/flex/201/langref/compilerWarnings.html</a></li>
								<li>Flex 2 Run-Time Error Listing: <a target="_blank" href="http://livedocs.adobe.com/flex/201/langref/runtimeErrors.html">http://livedocs.adobe.com/flex/201/langref/runtimeErrors.html</a></li>
                            </ul>

						</div>

			        </div>
					
					<!-- end tab content -->
			    </div>	


		</div>

		
			<p class="footer_text">
				Copyright © 2007 - 2008 Brice Mason
			</p>
		
	</div>

</body></html>